import React from "react";
import {inject, observer} from "mobx-react";
import {Route, withRouter} from "react-router-dom";
import {Icon, Tools} from "weaver-mobile";
import {ListViewPage, TabPage, RouteLayout} from "weaver-mobile-page";
import Condition from "./condition";
import {openHrmCard} from "../../../util";
import {WrAlertPage, WrListCard, WrListCardOperate, WrMenu, WrShow} from "../../../public";
import ProgramView from "../programView";

const getLabel = Tools.getLabel;

/**
 * 方案设置查询
 * jiansong 2019/11/8
 */
@inject("programStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.programStore;
    }

    componentDidMount() {
        this.store.doInit();
    }

    render() {
        const {list, hasInit, getTableDatas, queryParams, stabList, queryType, onSearchChange, updateListData} = this.store;
        const {menu, history} = this.props;
        return (
            <div className="workrelate-performance-program workrelate-listCard-reset workrelate-roll">
                <WrAlertPage show={hasInit && stabList && stabList.length == 0} msg={getLabel(508557, "暂未开启任何考核周期")}/>
                <WrShow show={hasInit && stabList && stabList.length > 0}>
                    <TabPage
                        span={[5, 1]}
                        tabs={queryType}
                        btns={[
                            <Icon
                                type="filter-o"
                                onClick={() => history.push("/performance/program/condition")}/>,
                        ]}
                        tabProps={{
                            page: queryParams.type,
                            onTabClick: (val) => {
                                onSearchChange({type: val.key});
                                getTableDatas();
                            }
                        }}
                    />
                    <ListViewPage.Normal
                        heightSpace={window.getThemeVars ? window.getThemeVars()["hd"] * 49 : 52}
                        store={list}
                        getTemplate={this.getTemplate}
                        renderSeparator={(section, index) => <WrListCardOperate key={index}/>}
                        onRowClick={data => this.handleRowClick(data)}
                    />
                </WrShow>
                <WrMenu
                    data={menu}
                    onSelect={val => history.push(val.props.path)}/>
                <Route
                    key="program-condition"
                    path="/performance/program/condition"
                    breadcrumbName="方案设置查询-高级搜索条件"
                    render={() => (
                        <RouteLayout>
                            <Condition key="route-program"/>
                        </RouteLayout>
                    )}
                />
                <Route
                    key="program-programView"
                    path="/performance/program/programView"
                    breadcrumbName="方案设置查询-考核方案详情"
                    render={() => (
                        <RouteLayout>
                            <div className="wm-route-layout" key="route-program-programView">
                                <ProgramView menu={menu} updateListData={updateListData}/>}/>
                            </div>
                        </RouteLayout>
                    )}
                />
            </div>
        )
    }

    //行点击事件
    handleRowClick = (data) => {
        this.props.history.push("/performance/program/programView?resourceid=" + data.hrmid)
    }

    //获取数据模板
    getTemplate = () => {
        return {
            default: [{
                key: "col_1",
                render: data => <WrListCard data={[
                    {
                        label: getLabel(30042, "人员"),
                        value: (<span style={{color: "#4D7AD8"}} onClick={(e) => openHrmCard(data.hrmid, e)}>
                            {data.hrmidspan}
                        </span>)
                    },
                    {label: getLabel(33553, "分部"), value: data.subcompanyid1span},
                    {label: getLabel(27511, "部门"), value: data.departmentidspan},
                    {label: getLabel(23247, "状态"), value: this.getStatus(data.s_statusspan)},
                ]}/>
            }]
        }
    }

    getStatus = (val) => {
        const color = {
            "0": "#ACA207",//草稿
            "1": "#868686",//审批中
            "2": "#B916E8",//退回
            "3": "#49D732",//已通过
            "11": "#868686",//审批中
            "13": "#C8C8C8",//已禁用
            "14": "#D81D19",//未设置
        }
        const type = {
            "1": getLabel(19398, "月度"),
            "2": getLabel(17495, "季度"),
            "3": getLabel(20729, "半年"),
            "4": getLabel(17138, "年度"),
        }
        var splitc = val.split(",");
        return (
            <span className="program-status">
            {
                splitc.map((item, index) => {
                    if (item) {
                        var result = item.split(":");
                        return <span key={index}>
                            <span>{type[result[0]]}：</span>
                            <span className="workrelate-status"
                                  style={{background: color[result[1]]}}>{result[2]}</span>
                        </span>
                    }
                })
            }
            </span>
        )
    }

}

